<template>
  <!-- 视频及作者信息 -->
  <div class="author-introduction">
    <div class="title">{{ videoInfo?.videoTitle }}</div>

    <div class="author-info">
      <div class="author">
        <img :src="videoInfo?.authorIconSrc" alt="" class="author-avatar">
        <span class="author-name">{{ videoInfo?.author }}</span>
      </div>

      <span class="span">{{ videoInfo?.playCount + '观看' }}</span>
      <span class="span">
        <i class="iconfont dianzan"></i>
        <span>{{ videoInfo?.likeCount }}</span>
      </span>
      <span class="span">
        <i class="iconfont icon_fav"></i>
        <span>{{ videoInfo?.favCount }}</span>
      </span>




    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { IVideoInfo } from '../index.vue';


// 获取父组件 index.vue 中的数据
defineProps({
  videoInfo: {
    type: Object as PropType<IVideoInfo>,
  }
})
</script>

<style scoped lang="scss">
.author-introduction {

  background-color: white;
  border-bottom: solid 1px rgb(135, 134, 134);
  border-top: solid 1px rgb(135, 134, 134);
  padding: 20px 10px 10px 10px;

  .title {
    font-size: 17px;
  }



  .author-info {
    display: flex;
    margin-top: 20px;
    font-size: 13px;
    color: #999;

    .author {
      height: 26px;
      flex: 1;
      color: black;

      .author-avatar {
        border-radius: 50%;
        margin-right: 10px;
      }

      .author-name {
        font-size: 13px;
      }
    }

    .span {
      margin-left: 15px;
      line-height: 26px;

      span {
        margin-left: 5px;
      }
    }



  }



}
</style>